<template>
  <div class="verify-coupon-container">
    <!-- 核销优惠券-->
    <div class="coupon-verify">
      <div class="coupon-verify-con">
        <div class="order-code"
             v-if="is_verify_coupon">
          <ul class="code-change clearfix">
            <li class="barCode fl"
                :class="type==1?'color':''"
                @click="handleCode(1)">
              <span>条形码</span>
            </li>
            <li class="qrCode fl"
                :class="type==2?'color':''"
                @click="handleCode(2)">
              <span>微信扫码</span>
            </li>
          </ul>
          <div class="bar-qrCode"
               v-show="type==1">
            <p class="barCode">
              <img :src="couponInfo.barCodeInfo" />
            </p>
            <div class="barcode-tip">条形码核销优惠券</div>
          </div>
          <div class="wxCode"
               v-show="type==2">
            <p class="wx-code">
              <img :src="couponInfo.wxCode" />
            </p>
          </div>
        </div>
        <div class="coupon-con item">
          <h2>{{couponInfo.title}}</h2>
          <!-- 折扣优惠券 -->
          <h3 class="coupon-price"
              v-if="couponInfo.promotion_type==1">
            <em>{{couponInfo.value}}折</em>
          </h3>
          <h3 class="coupon-price"
              v-else>
            ¥&nbsp;
            <em>{{couponInfo.value}}</em>
          </h3>
          <p v-if="couponInfo.at_least>0">(满{{couponInfo.at_least}}元使用)</p>
          <p v-else>(不限订单金额)</p>
        </div>
        <div class="start-time item clearfix">
          <div class="subtitle fl">生效时间</div>
          <p class="fr">{{couponInfo.start_time}}</p>
        </div>
        <div class="end-time item clearfix">
          <div class="subtitle fl">到期时间</div>
          <p class="fr">{{couponInfo.end_time}}</p>
        </div>

        <div class="coupon-info item">
          <div class="subtitle">补充说明</div>
          <p class="desc">{{couponInfo.description}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { verifyCoupon } from '@/api/user/member/memberApi'
import TopBack from '@/components/TopBack/index'
import Storage from '@/utils/store.js'
import small from '@/smallapp/small'

export default Vue.extend({
  components: {
    TopBack
  },
  data() {
    return {
      topBackParams: {
        headerTitle: '核销优惠券',
        bgColor: '#ffffff',
        titleSize: '16px',
        backLink: ''
      },
      query: '',
      type: 1,
      is_verify_coupon: '',
      couponInfo: {
        /* barCodeInfo: 'http://m.wfx.wxfenxiao.com/Public/BarCode/text/1721857/rUop/kmDbv/sid/6.html?pid=10348',
        wxCode: 'http://m.wfx.wxfenxiao.com/User/verifyCouponQrCode/verify_coupon_code/1721857/NbcZa/CTS2/sid/6.html?pid=10348',
        title: '优惠券名称',
        value: '11.00',
        at_least: '22',
        start_time: '2019-01-01',
        end_time: '2019-10-10',
        description: '优惠券描述' */
      }
    }
  },
  methods: {
    init(id) {
      let baseData = {}
      baseData.sid = small.globalData.shopId
      baseData.pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'

      // TODO 路径修改
      this.topBackParams.backLink = '/mycoupon?sid=' + baseData.sid + '&pid=' + baseData.pid
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      verifyCoupon({ id: id }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.is_verify_coupon = resData.is_verify_coupon
          this.couponInfo = resData.info
          this.type = resData.coupons_code_display || 1
          const curOrigin = wx.getExtConfigSync().appApiUrl?wx.getExtConfigSync().appApiUrl:window.location.origin
          // console.log(curOrigin, 'curOrigin')
          // 二维码
          this.couponInfo.barCodeInfo = curOrigin + '/Public/BarCode/text/' + resData.info.barcode + '?sid=' + small.globalData.shopId + '&pid=' + this.query.pid
          // 条形码
          this.couponInfo.wxCode = curOrigin + '/Public/verifyCouponQrCode/verify_coupon_code/' + resData.info.barcode + '?sid=' + small.globalData.shopId + '&pid=' + this.query.pid
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换条形码和微信扫码
    handleCode(type) {
      if (type != this.type) {
        this.type = type
      }
    }
  },
  created() {
    this.query = this.$route.query
    this.init(this.query.itemId)
  }
})
</script>

<style lang="scss">
// @import "../../../../../styles/mixin";
.coupon-verify {
  font-family: "Microsoft YaHei";
  padding: 25px 0 75px;
  background-color: #eee;
  .coupon-verify-con {
    width: 700px;
    padding:30px;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #fff;
    .order-code {
      text-align: center;
    }
    .code-change {
      width: 100%;
      height: 80px;
      overflow: hidden;
      li {
        height: 100%;
        width: 50%;
        padding: 20px 0;
        border: 2px solid #EDEDED;
        box-sizing: border-box;
        &:first-child{
          border-radius: 40px 0 0 40px;
          border-right: 0;
        }
        &:last-child{
          border-radius: 0 40px 40px 0;
          border-left: 0;
        }
        span {
          font-size: 28px;
          color: #333;
        }
        &.color {
          background-color: #F30C23;
          border-color: #F30C23;
          span {
            color: #fff;
          }
        }
      }
    }
    .bar-qrCode {
      padding: 74px 0 60px 0;
      border-bottom: 2px dashed #E6E6E6;
      .barCode {
        height: 200px;
        img {
          height: 100%;
          width: 460px;
        }
      }
      .barcode-tip {
        margin-top: 28px;
        font-size: 28px;
        color: #666666;
      }
    }
    .wx-code {
      padding: 40px 120px;
      border-bottom: 2px dashed #E6E6E6;
      img {
        width: 100%;
        margin: 0 auto;
      }
    }
  }
  .item {
    padding: 30px 0;
    border-bottom: 2px dashed #e6e6e6;
    color: #666666;
    font-size: 26px;
  }
  .coupon-con {
    padding: 50px 0;
    font-size: 28px;
    text-align: center;
    h2 {
      font-size: 32px;
      font-weight: bold;
    }
    .coupon-price {
      padding: 16px 0;
      font-size: 36px;
      font-weight: bold;
      color: #F21228;
      em {
        font-weight: bold;
        font-size: 60px;
        font-family: Gilroy-Regular;
        letter-spacing: 2px;
        display: inline-block;
      }
    }
    p {
      color: #666666;
      font-size: 26px;
    }
  }
  .subtitle {
    font-size: 24px;
    color: #666;
  }
  .desc {
    line-height: 36px;
  }
  .coupon-info {
    padding-bottom: 60px;
    border: 0;
    .subtitle {
      padding-bottom: 15px;
    }
  }
}
</style>
